<template>
  <div class="coms-live-iframe-none">
    <div v-if="showMarketingCard" @click="goMarketingPoster" :class="[lower ? lower : (unenableTopNav ? 'c-p-t60' : 'c-p-t128'), zClass]" class="c-pf c-p-r0 c-hh44 c-br-tl24 c-br-bl24 c-ph10 c-flex-row c-flex-center promote-bg">
      <img class="c-ww24 c-hh24" :src="require('@/assets/i/wap/common/marketing.png')" alt="">
      <div class="c-fs20 c-ml4 c-fc-sblack c-fw600 c-ml8">活动海报</div>
    </div>
    <div v-else-if="showInvitionCard && promoteIncome > 0 && !promoteObject.isChain" @click="goInvite" :class="[lower ? lower : (unenableTopNav ? 'c-p-t60' : 'c-p-t128'), zClass]" class="c-pf c-p-r0 c-hh44 c-br-tl24 c-br-bl24 c-ph10 c-flex-row c-flex-center promote-bg">
      <span class="iconfont c-fs22 theme-fc">&#xe78e;</span>
      <!-- <div class="c-fs20 c-ml4 theme-fc">奖励<span>{{'￥' | iosPriceFilter}}{{promoteIncome}}</span></div> -->
      <div class="c-fs20 c-ml4 theme-fc">邀请有礼</div>
    </div>
    <div v-else-if="showInvitionCard" @click="goInvite" :class="[lower ? lower : (unenableTopNav ? 'c-p-t60' : 'c-p-t128'), zClass]" class="c-pf c-p-r0 c-hh44 c-br-tl24 c-br-bl24 c-ph10 c-flex-row c-flex-center promote-bg">
      <img class="c-ww24 c-hh24" :src="require('@/assets/i/wap/common/present.png')" alt="">
      <div class="c-fs20 c-ml4 c-fc-sblack c-fw600 c-ml8">邀请好友</div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: 'PromoteIncome',
  props: {
    prodType: {
      type: Number,
      default: 0
    },
    prodId: {
      type: Number,
      default: 0
    },
    lower: {
      type: String,
      default: ''
    },
    zClass: {
      type: String,
      default: 'c-pz101'
    },
    showInvitionCard: {
      type: Boolean,
      default: false
    },
    showMarketingCard: {
      type: Boolean,
      default: false
    },
    needGetProfit: {
      type: Boolean,
      default: true
    },
  },
  computed: {
    // 判断是否有顶部导航
    unenableTopNav() {
      const companyAuth = localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : {};
      return companyAuth && companyAuth.companyTopNav && companyAuth.companyTopNav.style && companyAuth.companyTopNav.style == 5
    },
  },
  data() {
    return {
      promoteObject: '',
      promoteIncome: 0,
      cfg: JSON.parse(localStorage.getItem("cfg")),
    }
  },

  methods: {
    goInvite() {
      this.$emit('goInvite');
    },
    goMarketingPoster() {
      this.$emit('goMarketingPoster');
    },
    getPromote(pProdType, pProdId) {
      let url = `${global.apiurl}promote/list?prodType=${pProdType}&prodId=${pProdId}&limit=1&page=1`
      utilJs.getMethod(url, res => {
        this.promoteObject = res.data && res.data.length > 0 && res.data[0];
        this.promoteIncome = this.promoteObject ? ((this.promoteObject.price * this.promoteObject.commonRaito) / 100).toFixed(2) : 0;
      })
    },
  },
  mounted() {
    if (this.cfg && this.cfg.enableShowProfit && this.needGetProfit) {
      this.getPromote(this.prodType, this.prodId);
    } else {
      this.promoteIncome = 0;
    }
  },
  destroyed() {
  }
}
</script>

<style scoped>
.promote-bg {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 5px 0 #0000001a;
}
</style>
